<%@ page import="managesystem.Buddy"%>
<%@ page import="managesystem.Student"%>
<%@ page import="java.util.Collection"%>
<%@ page import="java.util.Iterator"%>
<script type="text/javascript"src="http://code.jquery.com/jquery-1.7.min.js"></script>
<script type="text/javascript" src="../scripts/jquery.wizard-tabs-0.1.min.js"></script>
<script type="text/javascript" src="../scripts/timer.js"></script>

<%
	/**
	*Als er al een activiteit bezig was: zet deze verder
	*/
	boolean resume = false;
	String type = null;
	String date = null;
	if (request.getParameter("resume") != null) {
		resume = true;
		type = (request.getParameter("type") != null) ? request
				.getParameter("type") : null;
		date = (request.getParameter("date") != null) ? request
				.getParameter("date") : null;
	}
	%>
<script type="text/javascript">
var started = false;
	/**
	 * Nodig voor het hervatten van een activiteit
	 */
	$('input[name=stop]').hide();
	if (<%=resume%>) {
		timestart.setTime(<%=date%>	);
		Start();
		started = true;
		 $(document).ready(function() {
		$('input[name=start]').hide();
		 });
	}
	/**
	 * Nodig voor de timer
	 */

	var stopped = false;
	function startTimer() {
		if (!started) {
			timestart = new Date();
			var type = $('select[name=type]').val();
			$.post('/startTimer', {
				'tracking' : 'other',
				'type' : type
			});
			$('input[name=start]').hide();
			$('input[name=stop]').show();
			started = true;
		}
		Start();
	}
	
	function stopTimer()
	{
		stopped=true;
		Stop();
	}
	
	function validate() {
		var valid = true;
		//Plaats fixen
		if($('#place').val() == "") 
			{
			$('#place').val($('#place2').val());
			}
		
		if(!started)
			{
			$('#errorsubmit').text("Don't forget to start the timer.");
			valid = false;
			}
		if(!stopped && started)
			{
			$('#errorsubmit').text("Don't forget to stop the timer");
			valid = false;
			}
		
		
		
		return valid;
	}
</script>
<link rel="stylesheet" type="text/css"
	href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.10/themes/base/jquery-ui.css" />
<script
	src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.10/jquery-ui.min.js"
	type="text/javascript"></script>
<%/**
* Nodig voor de buddy-dropdown
*/
Student currStud = (Student) session.getAttribute("currStud");
Collection<Buddy> studBuddies = currStud.getBuddies(); 
String[] places = currStud.getPlaces();
String[] aids = currStud.getAids();
String[] distr = currStud.getDistractions();
%>
<form action="/trackOther" method="post" id="form" name="form">

	<input name="tracking" value="other" type="hidden" />
	<div id="tabs" Style="position:relative; top:10px">
		<ul>

			<% if (!resume) {%>
			<li><a href="#tabs-1">Type selection</a></li>
			<% } %>
			<li><a href="#tabs-2">Timer</a></li>
			<li><a href="#tabs-3">Statistics</a></li>

		</ul>

		<% if (!resume) {%>
		<div id="tabs-1">
			<p>What are you going to do :</p>
			<select name="type">
				<option value="eat">Eat</option>
				<option value="sleep">Sleep</option>
				<option value="sport">Sport</option>
				<option value="gaming">Gaming</option>
				<option value="music">Music</option>
				<option value="social">Social</option>
			</select>
		</div>
		<%	} else { %>
		<input type="hidden" name="type" value="<%=type%>">
		<%	}	%>

		<div id="tabs-2">
			<p>Track your time :</p>
			<br> Time: <input type=text name="timetextarea" value="00:00"
				size="10" style="font-size: 20px"> <input type="hidden" name="seconds"><input type="hidden" name="minutesinseconds"><br> <br> <input type=button
				name="start" value="Start" onclick="startTimer()"> <input
				type=button name="stop" value="Stop" onclick="stopTimer()">
			<!--  <input
				type=button name="reset" value="Reset" onclick="Reset()">-->
		</div>
		
		

		<div id="tabs-3">
			<p>Add statistics :</p>
			<fieldset>
			<legend>Place</legend>
			<label>Place :</label> 				<select name="place2" id="place2">
					<option value="" selected></option>
					
					<% 
						for(String p : places) {  %>
					<option value=<%=p%>><%=p %></option>
					<%	}
							%>
				</select> Or add a new place: <input type="text" name="place" id="place" />
				<br />
			</fieldset>
			
			<fieldset>
			<legend>Buddies</legend>
			<label>Choose your buddy if you worked with one :</label>
			<div class="selectBuddy">
				<select name="buddies">
					<option value="" selected></option>
					<% 
		    	for (Iterator<Buddy> iter = studBuddies.iterator(); iter.hasNext();) {
		    		   Buddy b = (Buddy) iter.next();
		    		  %>
					<option value=<%=b.getId()%>><%=b.getFirstname() %>
						<%=b.getLastname() %></option>
					<%
		    		}
		    	%>
				</select> <br />
			</div>
			<input type="button" id="btnAdd" value="Add another buddy" /><br />
			</fieldset>
			
			<fieldset>
			<legend>Aid Tools</legend>
			<label>Aidtools you used:</label><br/>
			<div class="aidtools">
			<select name="aids" id="aids2">
					<option value="" selected></option>
					
					<% 
						for(String a : aids) { 
							if(!a.isEmpty()) { %>
					<option value=<%=a%>><%=a %></option>
					<%	}
							}%>
				</select>Or add a new aidtools: <input type="text" name="aids" id="aid" />
			</div>
			<input type="button" id="btnAddAid" value="Add another aidTool" /><br />
			</fieldset>
			
			<fieldset>
			<legend>Distractions</legend>
			<label>Distractions you suffered from:</label><br/>
			<div class="distractions">
			<select name="distr" id="distr">
					<option value="" selected></option>
					
					<% 
						for(String d : distr) { 
							if(!d.isEmpty()) {%>
					<option value=<%=d%>><%=d %></option>
					<%	} }
							%>
				</select>Or add a new distraction: <input type="text" name="distr" id="distr2" />
			</div>
			<input type="button" id="btnAddDistr" value="Add another distraction" /><br />
			</fieldset>
			
			<fieldset>
			<legend>Other information</legend>
			<label>Rating :</label>
			<select name="rating">
				<option value="1">Bad</option>
				<option value="2">Rather OK</option>
				<option value="3">Normal</option>
				<option value="4">Good</option>
				<option value="5">Really good!</option>
			</select> <br/> 
			
			<label>What did you do :</label><br/>
			<textarea name="description" COLS=30 ROWS=5></textarea><br />
			
			<label>Comment :</label><br/>
			<textarea name="comment" COLS=30 ROWS=5></textarea>
			<br/>
			</fieldset>
			
			<p id="errorsubmit"></p>
		</div>

	</div>

</form>
<script type="text/javascript">
$("#tabs").wizardTabs({
	submitAction : function() {
		if (validate()) {
			$("#form").submit();
		}
	}
});
</script>
